<template>
  <div class="index-content">
    <el-header>
      <div class="company">infosun 太信</div>
      <div class="header-nav">
        <el-dropdown trigger="click" @command="dropdown">
          <span class="el-dropdown-link">
            <el-avatar
              :size="36"
              @error="
                () => {
                  return true;
                }
              "
            >
              <!-- <i class="fa fa-user-circle" style="font-size:36px;"></i> -->
              <div class="user_right">admin</div>
            </el-avatar>
            <i class="el-icon-caret-bottom el-icon--right el-icon--left"></i>
            Hi, <span>admin</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="editpass">修改密码</el-dropdown-item> -->
            <el-dropdown-item command="exitsystem">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px" :style="{ minHeight: asideHeight }">
        <div class="user">
          <!-- <el-avatar :size="60" @error="()=>{return true}">
            <i class="fa fa-user-circle" style="font-size:60px;"></i>
          </el-avatar> -->
          admin
          <div>{{ user.admin || user.realName || user.userName }}</div>
          <p>{{ obj.regionName }}</p>
        </div>
        <el-menu
          :default-active="activeTab"
          class="el-menu-nav"
          @open="handleOpen"
          @close="handleClose"
          @select="jump"
          background-color="#3D4047"
          text-color="#ccc"
          active-text-color="#409eff"
          unique-opened
        >
          <div v-for="(item, k) of subMenuData" :key="k">
            <el-submenu :index="item.id" v-if="item.child">
              <template slot="title">
                <span>{{ item.title }}</span>
              </template>
              <router-link
                :to="i.url"
                v-for="(i, kids) of item.child"
                :key="kids"
              >
                <el-menu-item :index="i.kid">{{ i.name }}</el-menu-item>
              </router-link>
            </el-submenu>
          </div>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>
    </el-container>
    <el-dialog
      title="修改密码"
      :visible.sync="editpassword"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-input
        size="small"
        placeholder="请输入旧密码"
        v-model="ruleForm.oldpass"
        class="mine-loginput pass"
        @focus="loginTip = ''"
        show-password
        clearable
      >
        <i slot="prefix" class="fa fa-lock"></i>
      </el-input>
      <el-input
        size="small"
        placeholder="请输入新密码"
        v-model="ruleForm.newpass"
        class="mine-loginput pass"
        @focus="loginTip = ''"
        show-password
        clearable
      >
        <i slot="prefix" class="fa fa-lock"></i>
      </el-input>
      <el-input
        size="small"
        placeholder="请再次输入新密码"
        v-model="ruleForm.againpass"
        class="mine-loginput pass"
        @focus="loginTip = ''"
        show-password
        clearable
      >
        <i slot="prefix" class="fa fa-lock"></i>
      </el-input>
      <div class="login-tip">
        <el-alert
          :title="loginTip"
          type="info"
          v-if="loginTip != ''"
          :closable="false"
          show-icon
        ></el-alert>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editpassword = false" size="small">取 消</el-button>
        <el-button type="primary" @click="newpass" size="small"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  provide() {
    // 注册一个方法
    return {
      reload: this.reload,
      user: this.user,
      obj: this.obj,
      reloadindexcollect: this.reloadindexcollect
    };
  },
  data() {
    return {
      activeTab: "1",
      header_search: "", //头部搜索框
      asideHeight: document.documentElement.clientHeight - 60 + "px",
      navHeight: document.documentElement.clientHeight - 200 + "px",
      mianHeight: document.getElementsByClassName(".el-main"),
      subMenuData: [
        {
          id: "7",
          title: "12345概况",
          icon: "",
          child: [
            {
              kid: "7-1",
              name: "平台简介",
              url: "/index/overview/intro"
            },
            {
              kid: "7-2",
              name: "机构职责",
              url: "/index/overview/responsibilities"
            },
            {
              kid: "7-3",
              name: "工作流程",
              url: "/index/overview/workprocess"
            },
            {
              kid: "7-4",
              name: "受理范围",
              url: "/index/overview/acceptscope"
            },
            {
              kid: "7-5",
              name: "受理方式",
              url: "/index/overview/acceptway"
            }
          ]
        },
        {
          id: "1",
          title: "热线工作管理",
          icon: "",
          url: "/index/",
          child: [
            {
              kid: "1-1",
              name: "热线工作",
              url: "/index/hotline"
            }
          ]
        },
        {
          id: "2",
          title: "通知公告管理",
          icon: "",
          child: [
            {
              kid: "2-1",
              name: "通知公告",
              url: "/index/notice"
            }
          ]
        },
        {
          id: "3",
          title: "情报通告管理",
          icon: "",
          child: [
            {
              kid: "3-1",
              name: "情报通告",
              url: "/index/information"
            }
          ]
        },
        {
          id: "4",
          title: "热线月报管理",
          icon: "",
          child: [
            {
              kid: "4-1",
              name: "热线月报",
              url: "/index/monthly"
            }
          ]
        },
        {
          id: "5",
          title: "案件选登管理",
          icon: "",
          child: [
            {
              kid: "5-1",
              name: "案件选登",
              url: "/index/cause"
            }
          ]
        },
        {
          id: "6",
          title: "轮播图管理",
          icon: "",
          child: [
            {
              kid: "6-1",
              name: "轮播图",
              url: "/index/slideshow"
            }
          ]
        },
        {
          id: "8",
          title: "评论管理",
          icon: "",
          child: [
            {
              kid: "8-1",
              name: "评论管理",
              url: "/index/comment"
            }
          ]
        },
        {
          id: "9",
          title: "系统管理",
          icon: "",
          child: [
            {
              kid: "9-1",
              name: "系统维护",
              url: "/index/systemMaintenance"
            }
          ]
        }
      ],
      showout: false,
      collectknowledge: [],
      isRouterAlive: true,
      editpassword: false,
      ruleForm: {
        oldpass: "",
        newpass: "",
        againpass: ""
      },
      loginTip: ""
    };
  },
  watch: {
    /**
     * 监听路由，判断当前页面
     */
    $route(to, from) {
      let url = this.$route.path;
      this.subMenuData.some(item => {
        if (item.url != undefined) {
          if (item.url == url) {
            this.activeTab = item.id;
            return true;
          }
        } else {
          item.child.some(child => {
            if (child.url == url) {
              this.activeTab = child.kid;
              return true;
            }
          });
        }
      });
      //设置侧边高度满屏

      if (to.path.indexOf("index") != -1) {
        this.asideHeight = "100vh";
      }
    },
    editpassword(val) {
      if (!val) {
        this.ruleForm.oldpass = "";
        this.ruleForm.newpass = "";
        this.ruleForm.againpass = "";
      }
    }
  },
  computed: {
    obj() {
      if (
        !(
          sessionStorage.getItem("user") &&
          JSON.parse(sessionStorage.getItem("user"))
        )
      ) {
        return "";
      } else {
        return JSON.parse(sessionStorage.getItem("user"));
      }
    },
    user() {
      if (
        !(
          sessionStorage.getItem("user") &&
          JSON.parse(sessionStorage.getItem("user"))
        )
      ) {
        return "";
      } else {
        return JSON.parse(sessionStorage.getItem("user")).user;
      }
    }
  },
  created() {
    if (
      !(
        sessionStorage.getItem("user") &&
        JSON.parse(sessionStorage.getItem("user"))
      )
    ) {
      //this.$router.push('/')
    }
    this.activeTab = localStorage.getItem("activeTab");
    this.reloadindexcollect();
  },
  //页面侧边栏满屏
  mounted() {
    this.asideHeight = "100vh";
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    // 首页收藏
    reloadindexcollect() {
      // this._API
      //     .indexstart({ userId: this.user.userId })
      //     .then(res => {
      //         this.collectknowledge = res.data.data;
      //     })
      //     .catch(err => {});
    },
    // 打开导航
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 关闭导航
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 跳转路由
    jump(val) {
      // console.log(val)
      localStorage.setItem("activeTab", val);
    },

    // 搜索
    // allknowledge() {
    //     // console.log(this.$route.path)
    //     sessionStorage.setItem(
    //         "header_searchvalue",
    //         JSON.stringify({
    //             time: new Date(),
    //             value: this.header_search
    //         })
    //     );
    //     if (this.$route.path == "/index/allknowledge") {
    //         this.reload();
    //     } else {
    //         this.$router.push({
    //             name: "allknowledge",
    //             params: {
    //                 title: this.header_search
    //             }
    //         });
    //     }
    // },
    beforeunloadFn(e) {
      //   sessionStorage.setItem(
      //     "header_searchvalue",
      //     JSON.stringify({
      //       time: new Date(),
      //       value: ""
      //     })
      //   );
    },
    newpass() {
      let _this = this;
      if (_this.ruleForm.newpass !== _this.ruleForm.againpass) {
        _this.loginTip = "两次密码不一样";
        return false;
      }
      let data = new FormData();
      data.set("userId", _this.user.userId);
      data.set("oldPass", md5(_this.ruleForm.oldpass));
      data.set("newPass", md5(_this.ruleForm.newpass));
      _this._API
        .editoldpass(data)
        .then(res => {
          // console.log(res)
          _this.$message({
            type: "success",
            message: res.data.message
          });
          _this.editpassword = false;
        })
        .catch(err => {});
    },
    //修改密码
    editpass() {
      this.editpassword = true;
    },
    // 退出系统
    exitsystem() {
      // let _this = this
      // let data = new FormData()
      // data.set('username',_this.user.userName)

      // _this._API.loginout(data).then(res=>{
      // console.log(res)
      sessionStorage.removeItem("user");
      this.$router.push("/");
      // }).catch(err=>{
      // sessionStorage.removeItem('user')
      // this.$router.push('/')
      // })
    },
    dropdown(val) {
      if (val == "editpass") {
        this.editpass();
      } else if (val == "exitsystem") {
        this.exitsystem();
      }
    }
  },
  mounted() {
    window.addEventListener("beforeunload", e => this.beforeunloadFn(e));
  },
  destroyed() {
    window.removeEventListener("beforeunload", e => this.beforeunloadFn(e));
  }
};
</script>

<style lang="scss" scoped>
.index-content /deep/ {
  width: 100%;
  margin: 0;
  position: relative;
  min-width: 1071px;
  .el-header {
    z-index: 8;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #3399ff;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .company {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
    }
    .header-nav {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .el-input {
        width: 300px;
        margin-right: 50px;
        .el-input__prefix {
          left: 0;
          overflow: hidden;
          .el-input__inner {
            padding-left: 45px;
          }
        }
      }
      .user_right {
        // margin-top: 50px;
        // margin-left: 40px;
        // width: 50px;
        // height: 50px;
        // border-radius: 50%;
        // border: 1px solid #fff;
        font-size: 12px;
        color: #fff;
        // display: flex;
        // align-items: center;
        // justify-content: center;
      }
      .collect {
        font-size: 24px;
        color: #e0e0e0;
        position: relative;
        margin-right: 50px;
      }
      .el-dropdown-link {
        display: flex;
        align-items: flex-end;
        color: #fff;
      }
    }
  }
  .el-aside {
    position: fixed;
    top: 60px;
    left: 0;
    background: #3d4047;
    box-sizing: border-box;
    overflow: hidden;
    .user {
      margin-top: 50px;
      margin-left: 40px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #fff;
      font-size: 14px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;

      //   .el-avatar {
      //     display: block;
      //     margin: 0 auto;
      //   }
      //   div {
      //     line-height: 40px;
      //   }
      //   p {
      //     margin: 0;
      //   }
    }
    .el-menu-nav {
      text-align: left;
      .el-submenu {
        width: 200px;
      }
      .el-menu-item {
        width: 200px;
      }
    }
  }
  .el-main {
    width: 100%;
    height: 100%;

    margin-top: 60px;
    margin-left: 200px;
  }
}
.mine-loginput /deep/ {
  margin-bottom: 10px;
  .el-input__inner {
    padding: 0 40px;
  }
  .el-input__inner:hover {
    border-color: #0079fe;
  }
  .el-input__prefix {
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
  .el-input__suffix .el-input__clear {
    font-size: 24px;
  }
  .el-input__icon {
    margin-left: 10px;
  }
}
.login-tip >>> .el-alert--info.is-light {
  background: #999999;
  color: #ffffff;
}
</style>
